<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
  <meta charset="UTF-8">
  <title>500</title>
  <style>
    *{
      margin: 0; /*外边距*/
      padding: 0; /*内边距*/
      box-sizing: border-box; /*盒子大小规则*/
      font-family: sans-serif; /*字体:非衬线*/
    }
    body{
      background: linear-gradient(45deg, #8500ff, #5acaff); /*背景颜色渐变*/
      height: 100vh; /*高度：100视窗*/
    }
    #container{
      position: absolute; /*绝对定位*/
      top: 10%; /*距上部*/
      left: 10%;
      right: 10%;
      bottom: 10%;
      border-radius: 10px; /*圆角边框*/
      display: flex; /*弹性盒模型*/
      justify-content: center; /*主轴对齐方式*/
      align-items: center; /*交叉轴对齐方式*/
      background: url('https://ae01.alicdn.com/kf/Ubbbf0af0e5f440f5b93d7aaaa66efe1bn.jpg'), #151729; /*背景图片，颜色*/
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5); /*背景阴影*/
    }
    #container .content{
      max-width: 600px; /*最大宽度*/
      text-align: center; /*字体行居中*/
    }
    #container .content h2{
      font-size: 18vw; /*字体大小*/
      color: #fff;
      line-height: 1em; /*行高*/
    }
    #container .content h4{
      position: relative;
      font-size: 1.5em;
      margin-bottom: 20px;
      color: #111;
      background: #fff;
      font-weight: 300;
      padding: 10px 20px;
      display: inline-block; /*行内盒模型*/
    }
    #container .content p{
      color: #fff;
      font-size: 1.2em;
    }
    #container .content a{
      position: relative;
      display: inline-block;
      padding: 10px 25px;
      background: #ff0562;
      color: #fff;
      text-decoration: none;
      margin-top: 25px;
      border-radius: 25px;
      border-bottom: 4px solid #d00d56; /*下边框*/
      user-select: none;
    }

  </style>
</head>
<body>
<div id='container'>
  <div class='content'>
    <h2>error</h2>
    <h4>Opps!</h4>
    <p>
      不知道发生了啥啊......<br>
      联系站长吧...
    </p>
    <a th:href="@{/}">
      Back To Home
    </a>
  </div>
</div>

</body>
<script>
  // 根据id获取元素
  const container = document.getElementById('container');
  // 窗口的鼠标移动事件,传入event对象
  window.onmousemove = function(e) {
    // 返回被触发时的鼠标X，Y位置
    let x = e.clientX / 5
    y = e.clientY / 5;
    // 将容器的背景图片定位进行修改
    container.style.backgroundPositionX = x + 'px';
    container.style.backgroundPositionY = y + 'px';
  }
</script>
</html>